import { useLazySendMsgCodeQuery } from "@service/auth";
import classNames from "classnames";
import { useState, useEffect } from "react";
import { UseFormGetFieldState, UseFormGetValues } from "react-hook-form";
import toast from "react-hot-toast";
import styles from "@pages/login/styles/styles.module.less";
import { LoginFormState } from "@pages/login";

interface Props {
    // 用于获取字段验证状态
    getFieldState: UseFormGetFieldState<LoginFormState>;
    // 用于获取字段值
    getValues: UseFormGetValues<LoginFormState>;
}

export default function SendMsgCode(props: Props) {
    // 倒计时秒数
    const [count, setCount] = useState(60);
    // 用于标识是否正在倒计时
    const [isActive, setIsActive] = useState(false);
    // 用于发送验证码的请求
    const [sendMsg, { isError }] = useLazySendMsgCodeQuery();

    // 发送手机验证码
    const sendMsgCode = async () => {
      
        // 获取手机号字段的验证错误信息, 通过判断该值是否为 undefined 检测用户是否输入了正确的手机号
        const { error } = props.getFieldState("mobile");
        // 错误对象存在, 手机号未验证通过, 阻止程序继续执行
        if (typeof error !== "undefined") return;
        // 正在倒计时, 阻止程序继续执行
        if (isActive) return;
        // 发送手机验证码
        await sendMsg(props.getValues("mobile")).unwrap();
        // 开始倒计时
        setIsActive(true);
    };

    // 开启倒计时
    useEffect(() => {
        // 如果不需要倒计时, 阻止程序继续运行
        if (!isActive) return;
        // 开启倒计时
        const interval = window.setInterval(() => {
            setCount((prev) => prev - 1);
        }, 1000);
        return () => clearInterval(interval);
    }, [isActive]);

    // 监听倒计时秒数, 倒计时完成后将正在倒计时状态更改为 false
    useEffect(() => {
        if (count !== 0) return;
        setIsActive(false);
        setCount(60);
    }, [count]);

    // 监控验证码是否发送失败
    useEffect(() => {
        if (!isError) return;
        toast.error("短信验证码发送失败");
    }, [isError]);

    return (
        <button
            className={classNames({ [styles.active]: isActive })}
            type="button"
            onClick={sendMsgCode}
        >
            {isActive ? `${count}秒后重新获取` : "发送验证码"}
        </button>
    );
}